<template>
	<view v-if="showCalendar">
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>
		<view class="" style="padding-top: 100rpx;">
			<view>
				<!-- 插入模式 -->
				<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false"
					@change="changecalendar" @monthSwitch="changeMonthSwitch"  />
			</view>
		</view>
		<view class="" style="padding: 30rpx;" v-if="showAdd">
			<form @submit="formSubmit" >
				<view class="uni-form-item uni-column">
					<view class="text " style="margin-bottom:10rpx;">上班类型</view>
					<uni-data-checkbox selectedColor="#2979ff" selectedTextColor="#2979ff" v-model="dayTypeVale"
						:localdata="dayType"  @change="changeType" ></uni-data-checkbox>
				</view>
				<view class="uni-form-item uni-column" style="margin-top:10rpx;">
					<view class="text" style="margin-bottom:10rpx;">时间段</view>
					<view class="" style="display: flex;">
						<picker mode="time" :value="starttime" start="00:00" end="23:59" @change="bindStartTimeChange"
							style="text-decoration: underline;padding:0 10rpx">
							<view class="picker">
								{{starttime}}
							</view>
						</picker>
						<view class="" style="margin:0 10rpx;">
							到
						</view>
						<picker mode="time" :value="endtime" start="00:00" end="23:59" @change="bindEndTimeChange"
							style="text-decoration: underline;padding:0 10rpx">
							<view class="picker">
								{{endtime}}
							</view>
						</picker>
					</view>
				</view>
				<!-- <view class="uni-form-item uni-column" style="margin-top:10rpx;" >
					<view class="title" style="margin-bottom:10rpx;">备注</view>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="value" placeholder="请输入内容" @input="input"></uni-easyinput>
				</view> -->
				<view class="uni-btn-v">
					<view class="button-sp-area" style="text-align: center;margin-top: 10rpx;">
						<button class="mini-btn" style="height: 60rpx; line-height: 60rpx;background-color: #2979ff;"
							type="primary" form-type="submit" size="mini">提交</button>
					</view>
				</view>
			</form>
		</view>
		<uni-group :title="toYmdText" mode="card" v-if="toDayaddRecord">
			<view style="font-size: 24rpx;display: flex;justify-content: space-between;padding: 20rpx 0;border-bottom: 1rpx solid #f2f2f2;" v-for="(item, index) in toDayaddRecord"> 
				<view class="">{{item.type_text}}</view>
				<view class="">
				{{item.time_slot}}
					<view @click="del(item.id)" style="display:inline-block;background-color: #2979ff;color: #fff;padding:4rpx 10rpx;border-radius:10rpx;margin-left: 10rpx;">
						删除
					</view>
				</view>
			</view>
		</uni-group>
	</view>
</template>

<script>
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		components: {},
		data() {
			return {
				starttime: '09:00',
				endtime: '18:00',
				title: "考勤管理",
				showCalendar: false,
				showAdd: false,
				toDayYmd:"",
				toYmd: "",
				toYmdText:"",
				monthYm:"",
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				dayTypeVale: 1,
				dayType: [{
					text: '上午',
					value: 1
				}, {
					text: '下午',
					value: 2
				}, {
					text: '全天',
					value: 3
				}],
				toDayaddRecord:""
			}
		},
		onReady() {
			const today = new Date();
			const year = today.getFullYear(); // 获取年份
			const month = String(today.getMonth() + 1).padStart(2, '0'); // 获取月份，注意月份从0开始
			const day = String(today.getDate()).padStart(2, '0'); // 获取日期

			const toYmd = `${year}-${month}-${day}`;
			this.toDayYmd = toYmd
			this.toYmd = toYmd
			this.toYmdText=toYmd
			this.monthYm=`${year}-${month}`;
			this.$nextTick(() => {
				this.showCalendar = true
				this.showAdd = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				// this.info.date = getDate(new Date(), -30).fullDate
				// this.info.startDate = getDate(new Date()).fullDate
				// this.info.endDate = getDate(new Date()).fullDate
				// this.info.selected = [{
				// 		date: "2024-11-20",
				// 		info: '打卡'
				// 	},
				// 	{
				// 		date: "2024-11-15",
				// 		info: '签到',
				// 		data: {
				// 			custom: '自定义信息',
				// 			name: '自定义消息头'
				// 		}
				// 	},
				// 	{
				// 		date: "2024-11-11",
				// 		info: '上午班'
				// 	}
				// ]
				this.timeList();
			}, 1000)
		},
		methods: {
			async del(e){
				var data={
					token:uni.getStorageSync('token'),
					id:e
				}
				if (uni.getStorageSync('userInfo')) {
					data.uid = uni.getStorageSync('userInfo').uid
				}
				var but_status=false
				if(but_status){
					uni.showToast({
						title: '重复提交',
						icon:'error',
						duration: 1500, 
					});
					return false;
				}
				but_status=true
				let res = await this.$myRequest({
					url: '/timeCardDel',
					data,
					methods: 'post'
				})
				but_status=false;
				if (res.data.status) {
					this.timeList()
				}
			},
			bindStartTimeChange(e) {
				this.starttime = e.target.value;
			},
			bindEndTimeChange(e) {
				this.endtime = e.target.value;
			},
			open() {
				this.$refs.calendar.open()
			},
			close() {
			},
			changecalendar(e) {
				console.log(e)
				if (e.fulldate > this.toDayYmd) {
					this.showAdd = false
				} else {
					this.showAdd = true
				}
				this.toYmd=e.fulldate
				this.toYmdText=this.toYmd
				this.getToDayaddRecord()
			},
			changeMonthSwitch(e){
				this.monthYm=e.year+"-"+e.month
				this.toYmd=""
				this.showAdd=false
				this.timeList()
			},
			// changeDate(e){
				// console.log(e)
				// this.monthYm=e.year+"-"+e.month
				// this.toYmd=""
				// this.showAdd=false
				// this.timeList()
			// },
			changeType(e){
				this.dayTypeVale=e.detail.value
			},
			async formSubmit(){
				var data={
					token:uni.getStorageSync('token'),
					dayTypeVale:this.dayTypeVale,
					starttime: this.starttime,
					endtime: this.endtime,
					month:this.monthYm,
					ymd:this.toYmd,
					cate:1,
				}
				if (uni.getStorageSync('userInfo')) {
					data.uid = uni.getStorageSync('userInfo').uid
				}
				var but_status=false
				if(but_status){
					uni.showToast({
						title: '重复提交',
						icon:'error',
						duration: 1500, 
					});
					return false;
				}
				but_status=true
				let res = await this.$myRequest({
					url: '/timeCardAdd',
					data,
					methods: 'post'
				})
				but_status=false;
				if (res.data.status) {
					this.timeList()
				}
			},
			async timeList(){
				var data={
					token:uni.getStorageSync('token'),
					month:this.monthYm,
					cate:1,
				}
				if (uni.getStorageSync('userInfo')) {
					data.uid = uni.getStorageSync('userInfo').uid
				}
				let res = await this.$myRequest({
					url: '/timeCardList',
					data,
					methods: 'post'
				})
				if(res.data.status){
					this.info.selected=res.data.data
					this.getToDayaddRecord()
				}
			},
			async getToDayaddRecord(){
				this.toDayaddRecord="";
				var list=this.info.selected
				for (var i = 0; i < list.length; i++) {
					if(this.toYmd==list[i].date){
						this.toDayaddRecord=list[i].data
					}
				}
			},
			// change(e) {
			// 	// 模拟动态打卡
			// 	if (this.info.selected.length > 5) return
			// 	this.info.selected.push({
			// 		date: e.fulldate,
			// 		info: '打卡1'
			// 	})
			// },
			confirm(e) {
			},
			monthSwitch(e) {
			}
		}
	}
</script>

<style>
	::v-deep .uni-calendar-item__weeks-box-circle{
		background-color: #2979ff;
	}
	::v-deep .uni-calendar-item--extra{
		color: #2979ff;
	}
	::v-deep .uni-calendar-item--isDay{
		color: #fff;
	}
	::v-deep .uni-calendar-item--checked{
		color: #fff;
	}
</style>